<template>
  <div class="product-list">
    <ul>
      <li v-for="item in productList" :key="item.id">
        <div class="pic">
          <img :src="item.logoUrl" @click="goDetail(item.id)" />
        </div>
        <div class="info">
          <div class="title" @click="goDetail(item)">{{ item.title }}</div>
          <div v-html="item.subTitle ? item.subTitle.replace(/\n/g, '<br>') : ''"></div>
          <div class="look">
            <a href="javascript:void(0)" @click="goDetail(item)" class="a_blue_14">查看更多&gt;&gt;</a>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import api from '@/api'
export default {
  name: 'ProductList',
  data() {
    return {
      productList: [],
      query: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      loading: false
    }
  },
  methods: {
    getProductList() {
      this.loading = true
      const id = this.currNavInfo ? this.currNavInfo.id : ''
      const params = {
        ...this.query,
        categoryId: id,
        type: !id ? this.firstNav.type : ''
      }
      api.getContentList(params).then(res => {
        this.productList = res.rows
        this.total = res.total
        this.loading = false
      })
    },
    goDetail(item) {
      const path = this.$route.path.replace(/\/[^/]+$/, '');
       let nav = this.baseNav.find(e => e.id == item.categoryId)
      localStorage.setItem('navInfo', JSON.stringify(nav))
      this.saveNavInfo()
      this.$router.push({path: `${path}-detail?id=${item.id}`})
    }
  },
  created() {
  },
  watch: {
    'currNavInfo.id': {
      handler() {
        this.getProductList()
      },
      immediate: true
    },
  }
}
</script>
<style scoped lang="scss">
.product-list {
  width: 100%;
  height: 100%;

  ul {
    li {
      display: flex;
      justify-content: space-between;
      padding: 0 0 25px 0;
      margin: 0 0 25px 0;
      border-bottom: 1px #CCCCCC dashed;
      img {
        width: 237px;
        aspect-ratio: 237 / 200;
        cursor: pointer;
      }

      .info {
        flex: 1;
        margin-left: 30px;

        .title {
          color: #365897;
          font-size: 18px;
          line-height: 25px;
          cursor: pointer;

          &:hover {
            text-decoration: underline;
          }
        }
      }
      .look {
        text-align: right;
      }
    }
  }
}
</style>
